/* eslint-disable eqeqeq */
<template>
  <div class="menu-tree-container">

    <div>
      <el-tree class="treeShow"
               :data="treeData"
               :props="defaultProps"
               label="wbs_name"
               node-key="wbs_id"
               ref="menuList"
               :highlight-current="true"
               :filter-node-method="filterNode"
               :expand-on-click-node="true"
               @node-click="getId"
               :default-expanded-keys="selectedNodeList"
               :auto-expand-parent="false"
               draggable
               :accordion="false">
        <span class="slot-t-node"
              slot-scope="{ node, data }">
          <span v-show="!node.isEdit">
            <span v-show="data.children && data.children.length >= 1">
              <!-- <i :class="{'el-icon-time':node.level<=1,'el-icon-bell':node.level>1&&node.level<=2,'el-icon-service':node.level>2}" /> -->
              <i :class="{ 'el-icon-plus':!node.expanded,'el-icon-minus':node.expanded}" />
              <span :class="[data.wbs_id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.menu_name||data.wbs_name">{{data.desc||data.wbs_name}}</span>
            </span>
            <!-- 当树形节点不存在子节点时，设置单独的图标 -->
            <span v-show="!data.children || data.children.length == 0">
              <i class="el-icon-document"></i>
              <span :class="[data.wbs_id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.menu_name ||data.wbs_name">{{data.desc||data.wbs_name}}</span>
            </span>
          </span>

        </span>
      </el-tree>
    </div>

  </div>
</template>
<script>
import { monitorPublicApi } from '@/services/ProjectCenter'
export default {
  name: 'leftTree',

  data () {
    return {
      judge: '',
      info: this.messageinfo,

      work: false,
      filterText: '',
      addSonUnitDialog: false,
      addDepDialog: false,
      addJobDialog: false,
      DATA: null,
      NODE: null,
      maxexpandId: 95, // 新增节点开始id
      non_maxexpandId: 95, // 新增节点开始id(不更改)
      isLoadingTree: true, // 是否加载节点树
      //   setTree:api.treelist,//节点树数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      menuVisible: false,
      objectID: null,

      menuTreeParam: {
        menu_no: '0'
      },
      // 需要删除的菜单数据
      deleteMenuTreeParam: {
        menu_id: ''
        // menu_no: ''
      },
      // 选择图标弹框是否可见
      selectIconDialogVisible: false,
      // 选中的节点列表，用于刷新后展开到指定位置
      selectedNodeList: [],
      treeData: []
    }
  },
  components: {

  },
  props: {
    curMenu: Object,
    uuid: {
      type: Number
    },
    projectId: {
      type: Number
    }
  },
  watch: {
    filterText (val) {
      this.$refs.menuList.filter(val)
    },
    projectId: {
      handler (newval) {
        if (newval) {
          this.getTreeData()
        }
      },
      deep: true
    }
  },
  methods: {
    // 新增
    onAdd () {
      this.judge = 1
    },
    onEdit () {
      this.judge = 2
    },
    // 节点点击事件获取id
    getId (data, node) {
      let curData = JSON.parse(JSON.stringify(data))
      curData.parentNode = node.parent.data
      console.log('click', curData)
      // console.log(curData.children_list)
      this.menuVisible = false
      this.$emit('update:curMenu', curData)

      if ((node.expanded || node.childNodes.length === 0) && data.wbs_id) {
        this.addNodeList(data.wbs_id)
      } else {
        this.removeNodeList(data.wbs_id)
      }
    },
    // 当当前节点是展开操作时,将当前节点的object_id添加到selectedNodeList中，为了刷新数据后能够展开到指定位置
    addNodeList (wbsId) {
      let index = this.selectedNodeList.indexOf(wbsId)
      if (index < 0) {
        this.selectedNodeList.push(wbsId)
      }
    },
    // 当前节点是收起操作时，将当前节点的object_id从selectedNodeList中移除
    removeNodeList (wbsId) {
      let index = this.selectedNodeList.indexOf(wbsId)
      if (index >= 0) {
        this.selectedNodeList.splice(index, 1)
      }
    },
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode (value, data) {
      // console.log('value:', value)
      // console.log('data:', data)
      if (!value) return true
      return data.menu_name.indexOf(value) !== -1
    },

    NodeBlur (n, d) {
      // 输入框失焦
      if (n.isEdit) {
        this.$set(n, 'isEdit', false)
      }
      this.$nextTick(() => {
        this.$refs['slotTreeInput' + d.id].$refs.input.focus()
      })
    },

    // 右键点击事件
    rihgtClick (event, object, value, element) {
      this.DATA = object
      this.NODE = value
      this.menuVisible = !this.menuVisible
      // console.log(object, value, 'right')
      document.addEventListener('click', e => {
        this.menuVisible = false
      })
      let menu = document.querySelector('#rightClickMenu')
      /* 菜单定位基于鼠标点击位置 */
      menu.style.left = event.clientX + 20 - 200 + 'px'
      menu.style.top = event.clientY - 35 + 'px'
      menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
      menu.style.width = 160 + 'px'
    },
    // 处理传入的数据，因为后端都是children_list，需要手动赋值一个children字段
    handelData (arr) {
      if (Object.prototype.toString.call(arr) === '[object Array]') {
        arr.map((item) => {
          console.log('item', item)
          if (item.children_list) {
            item.children = item.children_list
            this.handelData(item.children_list)
          } else if (item.childrens) {
            item.children = item.childrens
            this.handelData(item.childrens)
          }
          if (item.sid) {
            item.menu_id = item.sid
          }
          if (item.menu_id === '') {
            item.menu_id = '0'
          }
          if (!item.wbs_name) {
            item.wbs_name = item.project
          }
        })
        return arr
      }
    },

    // 获取wbs分解树
    getTreeData () {
      // this.axios.get('/admin/ProjectConstruction/resolve', {
      //   params: {
      //     project_id: this.projectId || 91,
      //     uuid: this.uuid || 1
      //   }
      // })
      console.log(this.projectId, 'props')
      monitorPublicApi.getConstructionTree({
        params: {
          project_id: this.projectId || 41,
          wbs_types: '3,4'

        }
      }).then(res => {
        console.log(res, 'get tree data')
        let data = res.data
        if (res.code === 0) {
          let list = data
          this.$emit('update:proName', list[0].project)
          list.map((buildItem) => {
            if (buildItem.children) {
              buildItem.children.map((floorItem) => {
                floorItem.p_desc = buildItem.desc
              })
            }
          })
          this.treeData = list
          this.handelData(this.treeData)
        }
        // if (data.code === 1) {
        //   let list = data.data
        //   list.map((buildItem) => {
        //     if (buildItem.children) {
        //       buildItem.children.map((floorItem) => {
        //         floorItem.p_desc = buildItem.desc
        //       })
        //     }

        //   })
        //   this.treeData = list
        // }
      })
    }

  },

  computed: {
    // menuTree () {
    //   let store = this.$store.state.menuTree
    //   let storage = JSON.parse(window.localStorage.getItem('menuTree')) || []
    //   let treeData = store.length > 0 ? store : storage
    //   treeData = this.handelData(treeData)
    //   return treeData
    // }
  },
  created () {
    this.getTreeData()
    this.selectedNodeList = []
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
#search-style {
  background: rgba(26, 188, 156, 1);
}
#save-style {
  color: white;
  background: rgba(26, 188, 156, 1);
}
/* 去掉默认的树形图标 */
/* .treeShow /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
  display: none;
} */

.popover-new {
  /* position: absolute!important;
    right: 0;
    bottom: 0; */
}
/*顶部按钮*/
.slot-tree .slot-t-top {
  margin-bottom: 15px;
}
.slot-tree .slot-t-node span {
  display: inline-block;
}
/*节点*/
.slot-tree .slot-t-node--label {
  font-weight: 600;
}
/*输入框*/
.slot-tree .slot-t-input .el-input__inner {
  // height: 26px;
  // line-height: 26px;
}
/*按钮列表*/
.slot-tree .slot-t-node .slot-t-icons {
  display: none;
  margin-left: 10px;
}
.slot-tree .slot-t-icons .el-button + .el-button {
  margin-left: 6px;
}
.slot-tree .el-tree-node__content:hover .slot-t-icons {
  display: inline-block;
}
.menu-tree-container {
  // z-index: 9999;
  width: 200px;
  min-height: 260px;
  height: auto;
  .select-icon {
    font-size: 30px;
    margin-left: 5px;
    transform: translateY(5px);
  }
  .menuItem {
    height: 40px;
    line-height: 40px;
    background-color: #545c64;
    font-size: 1.2rem;
  }
  .menuItem:hover {
    background-color: #409eff;
  }
  .el-tree {
    min-height: 260px;
    height: auto;
  }
}

/*************************标签鼠标右击页面样式******************************/
.el-menu-vertical {
  border: 3px solid rgb(84, 92, 100);
  border-radius: 10px;
  z-index: 100;
}
.el-menu-vertical i {
  color: #777777;
}

.add_tips /deep/ .el-form-item__label {
  padding-left: 28px;
}
</style>
